<template>
	<view class="code-container">
		<!-- 我的二维码 -->
		<view class="code-card">
			<image class="qrcode" :src="userInfo.invite_qr_code" mode="aspectFit" />
			<text class="code-tip">长按保存二维码</text>
		</view>
    <!-- 推广商信息卡片 -->
    <view class="info-card">
      <view class="info-content">
        <view class="info-item" v-if="userInfo.parent_user_id">
          <text class="label">上级推广人</text>
          <text class="value">{{parentInfo.nickname || '暂无'}}</text>
        </view>
        <view class="info-item" v-if="userInfo.parent_user_id">
          <text class="label">上级推广人级别</text>
          <text class="value">{{getUserType(parentInfo.user_type) || '暂无'}}</text>
        </view>
        <view class="info-item">
          <text class="label">我的推等级</text>
          <text class="value">【{{ getUserType(userInfo.user_type)}}】</text>
        </view>
      </view>
    </view>

    <!-- 分销金额统计 -->
    <view class="statistics-card">
      <view class="card-header">
        <text class="card-title">分销金额统计</text>
      </view>
      <view class="statistics-content">
        <view class="statistics-grid">
          <view class="statistics-item">
            <view class="statistics-value">
              <text class="amount">¥{{statistics.total_amount || '0.00'}}</text>
            </view>
            <view class="statistics-label">
              <text class="label-text">历史总计</text>
            </view>
          </view>
          <view class="statistics-item">
            <view class="statistics-value">
              <text class="amount">¥{{statistics.month_amount || '0.00'}}</text>
            </view>
            <view class="statistics-label">
              <text class="label-text">本月总计</text>
            </view>
          </view>
          <view class="statistics-item">
            <view class="statistics-value">
              <text class="amount">¥{{statistics.today_amount || '0.00'}}</text>
            </view>
            <view class="statistics-label">
              <text class="label-text">当日金额</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 我的下级用户列表 -->
    <view class="subordinate-card" v-if="userInfo.user_type !== 2 && userInfo.user_type !== 0">
      <view class="card-header">
        <text class="card-title">我的下级用户</text>
        <text class="subordinate-count">({{subordinateList.length}}人)</text>
      </view>
      <view class="subordinate-content">
        <view v-if="subordinateList.length === 0" class="empty-state">
          <text class="empty-text">暂无下级用户</text>
        </view>
        <view v-else class="subordinate-list">
          <view
            v-for="(item, index) in subordinateList"
            :key="item.id"
            class="subordinate-item"
          >
            <view class="user-info">
              <image
                class="user-avatar"
                :src="item.avatar_url || '/static/images/user.png'"
                mode="aspectFill"
              />
              <view class="user-details">
                <text class="user-nickname">{{item.nickname || '未知用户'}}</text>
                <text class="user-type">{{getUserType(item.user_type)}}</text>
              </view>
            </view>
            <view class="user-status">
              <text class="status-text" :class="item.status === 1 ? 'active' : 'inactive'">
<!--                {{item.status === 1 ? '正常' : '禁用'}}-->
                {{ getAmount(item.balanceRecord)}}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
	</view>
</template>

<script>
	import dayjs from "dayjs";

  export default {
		data() {
			return {
				parentInfo: {},
				subordinateList: [],
				statistics: {
					total_amount: '0.00',
					month_amount: '0.00',
					today_amount: '0.00'
				},
			}
		},
    onLoad(){
      console.log(this.userInfo)
      this.$store.dispatch('getUserInfo').then(res => {
        if (!res.invite_qr_code) {
          this.$api.getInviteQrCode({ user_id: res.id }).then(invite_qr_code => {
          	this.$store.commit('SET_USERINFO', {
              ...res,
              invite_qr_code
            })
          })
        }

        if (this.userInfo.parent_user_id) {
          this.$api.getUserInfo(this.userInfo.parent_user_id).then(res => {
            this.parentInfo = res
          })
        }
        // 获取下级用户列表
        this.getSubordinateList()
        // 获取分销金额
        this.getBalanceRecordList()
      })
    },
		methods: {
      getUserType(type) {
        //  '1 普通用户 2 商家 3 一级分销商 4 二级分销商'
        switch (type) {
          case 1:
            return '普通用户'
          case 2:
            return '商家'
          case 3:
            return '一级分销商'
          case 4:
            return '二级分销商'
          default:
            return '普通用户'
        }
      },
      // 获取下级用户列表
      getSubordinateList() {
        this.$api.getUserList({ parent_user_id: this.userInfo.id }).then(res => {
          this.subordinateList = res || []
        }).catch(err => {
          console.error('获取下级用户失败:', err)
        })
      },
      getBalanceRecordList() {
        this.$api.getBalanceRecordList({ user_id: this.userInfo.id, type: 2}).then(res => {
          if (res) {

            let total_amount = 0
            // 相加
            total_amount = res.reduce((acc, item) => {
              return acc + item.amount
            }, 0)
            // 当月总额
            let month_amount = 0
            // 当日总额
            let today_amount = 0
            // 循环
            res.forEach(item => {
              // 使用dayjs比较时间是当月的
              if (dayjs(item.create_time).isSame(dayjs(), 'month')) {
                month_amount += item.amount
              }
              // 使用dayjs比较时间是当日的
              if (dayjs(item.create_time).isSame(dayjs(),'day')) {
                today_amount += item.amount
              }
            })

            this.statistics = {
              total_amount: total_amount.toFixed(2),
              month_amount: month_amount.toFixed(2),
              today_amount: today_amount.toFixed(2)
            }
          }
        })
      },
      getAmount(res) {
        let total_amount = 0
        // 相加
        total_amount = res.reduce((acc, item) => {
          return acc + item.amount
        }, 0)
        return total_amount.toFixed(2)
      }
		}
	}
</script>

<style lang="scss">
	.code-container {
		min-height: 100vh;
		background: #f8f9fa;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 32rpx;
	}

	// 卡片通用样式
	.info-card, .code-card, .distribution-settings {
		width: 100%;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
		margin-bottom: 32rpx;
		overflow: hidden;
	}

	.card-header {
		padding: 32rpx;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	// 推广商信息卡片样式
	.info-content {
		padding: 32rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.label {
		font-size: 28rpx;
		color: #666;
	}

	.value {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	// 二维码卡片样式
	.code-card {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.qrcode {
		width: 260px;
		height: 260rpx;
		margin: 32rpx 0;
		border-radius: 16rpx;
	}

	.code-tip {
		color: #888;
		font-size: 26rpx;
		margin-bottom: 32rpx;
	}

	.save-btn {
		width: 80%;
		height: 80rpx;
		background: #4e8ef7;
		color: #fff;
		font-size: 32rpx;
		border-radius: 16rpx;
	}

	// 推广设置样式
	.setting-content {
		padding: 32rpx;
	}

	.setting-item {
		margin-bottom: 32rpx;
	}

	.setting-input {
		display: flex;
		align-items: center;
		border: 2rpx solid #eee;
		border-radius: 12rpx;
		padding: 0 24rpx;
		height: 80rpx;
    margin-top: 32rpx;
	}

	.setting-input input {
		flex: 1;
		height: 100%;
		font-size: 28rpx;
	}

	.unit {
		font-size: 28rpx;
		color: #666;
		margin-left: 8rpx;
	}

	.setting-tip {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
		display: block;
	}

	.setting-btn {
		width: 100%;
		height: 80rpx;
		background: #4e8ef7;
		color: #fff;
		font-size: 32rpx;
		border-radius: 16rpx;
	}

	.subordinate-card {
		width: 100%;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
		margin-bottom: 32rpx;
		overflow: hidden;
	}

	.subordinate-count {
		font-size: 24rpx;
		color: #999;
		margin-left: 8rpx;
	}

	.subordinate-content {
		padding: 32rpx;
	}

	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 80rpx 0;
	}

	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	.subordinate-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
	}

	.subordinate-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		background: #f8f9fa;
		border-radius: 16rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}

	.user-details {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.user-nickname {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.user-type {
		font-size: 24rpx;
		color: #666;
	}

	.user-status {
		display: flex;
		align-items: center;
	}

	.status-text {
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		border-radius: 12rpx;
	}

	.status-text.active {
		background: #e8f5e8;
		color: #52c41a;
	}

	.status-text.inactive {
		background: #fff2f0;
		color: #ff4d4f;
	}

	.statistics-card {
		width: 100%;
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
		margin-bottom: 32rpx;
		overflow: hidden;
	}

	.statistics-content {
		padding: 32rpx;
	}

	.statistics-grid {
		display: flex;
		justify-content: space-between;
		gap: 24rpx;
	}

	.statistics-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 24rpx 16rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 16rpx;
		position: relative;
		overflow: hidden;
	}

	.statistics-item:nth-child(2) {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	}

	.statistics-item:nth-child(3) {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}

	.statistics-value {
		margin-bottom: 12rpx;
	}

	.amount {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
	}

	.statistics-label {
		display: flex;
		align-items: center;
	}

	.label-text {
		font-size: 24rpx;
		color: rgba(255,255,255,0.9);
		font-weight: 500;
	}

	/* 添加一些装饰效果 */
	.statistics-item::before {
		content: '';
		position: absolute;
		top: -50%;
		left: -50%;
		width: 200%;
		height: 200%;
		background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
		transform: rotate(45deg);
		pointer-events: none;
	}
</style>
